<template>
    <div class="container">
      <div class="cheader2">
        <van-icon
        @click="goBack"
        class="chl"
        name="arrow-left"
        color="#000"
        size="20"
      />
      <div class="chtitle">划转</div>
      <div class="djbox"></div>
      </div>
      <div class="mbox">
        <div class="bbox">
          <div class="bli">
            <div class="bli1">从</div>
            <div class="bli2">
                奖励账户
            </div>
          </div>
          <div class="bli">
            <div class="bli1">到</div>
            <div class="bli2">
                充值账户
            </div>
          </div>
          <!-- <img
            :class="[submitForm.side ? 'a' : 'g']"
            @click="submitForm.side = !submitForm.side"
            src="@/assets/images/huazhuan.png"
            alt=""
          /> -->
        </div>
        <div class="ili">
          <div class="ili-1">数量</div>
          <div class="ili-2">
            <van-field
              v-model="submitForm.amount"
              placeholder="0"
              :border="false"
              @change="handleNum"
              type="number"
            />
            <span class="xxx">USDT <span @click="chooseAll">全部</span></span>
          </div>
        </div>
        <div class="ali">
          <div class="ali1">奖励账户资产</div>
          <div class="ali2">
            {{
              walletInfo.capital.frozen
            }}
            USDT
          </div>
        </div>
      </div>
  
      <div class="btn" @click="handleSubmit">确认划转</div>
    </div>
  </template>
    
    <script setup lang='ts'>
  import { reactive, computed } from "vue";
  import { useRouter, useRoute } from "vue-router";
  import { useStore } from "@/store";
  import { Toast } from "vant";
  import http from "@/utils/http";
  const route = useRoute();
  const router = useRouter();
  const store = useStore();
  const walletInfo = computed(() => store.state.users.wallet);
  const submitForm = reactive({
    amount: "",
    side: route.query.active === "1" ? true : false,
  });
  const chooseAll = () => {
    submitForm.amount = walletInfo.value.capital.frozen
  };
  const handleNum = ()=>{
  if(Number.isNaN(+submitForm.amount)){
    submitForm.amount = '0'
  }else{
    submitForm.amount = parseFloat((+submitForm.amount).toFixed(6)) + ''
  }
}
  const handleSubmit = () => {
    if (
      !submitForm.amount ||
      submitForm.amount > walletInfo.value.capital.frozen
    ) {
      Toast("划转数量不正确");
      return;
    }
    http
      .get("user/withdrawal_record/transfer", {
        num : submitForm.amount, //划转数量
      })
      .then((res: any) => {
        if (res.code === 0) {
          Toast("划转成功");
          setTimeout(() => {
            goBack();
          }, 1000);
        }
      });
  };
  const goBack = () => {
    router.go(-1);
  };
  </script>
    
    <style lang="scss" scoped>
.cheader2 {
  z-index: 1001;
  width: 100%;
  height: 45px;
  background-color: #fff;
  font-size: 16px;
  color: #000;
  position: fixed;
  top: 0;
  left: 0;

  .chl {
    position: absolute;
    left: 16px;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
  }
  .chtitle {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
  }
  .djbox {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    img {
      width: 16px;
      margin-right: 4px;
    }
    div {
      font-size: 13px;
      color: #878b97;
    }
  }
}
  .mbox {
    margin-top:45px;
    padding: 10px 20px 0;
    .bbox {
      background: #f0f0f0;
      border-radius: 2px;
      position: relative;
      margin-bottom: 30px;
      img {
        width: 20px;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
      }
      .bli {
        display: flex;
        align-items: center;
        height: 40px;
        padding: 2px 20px;
        &:first-child{
            border-bottom:1px solid #fff;
        }
        .bli1 {
          font-size: 12px;
          color: #000;
          margin-right: 20px;
        }
        .bli2 {
          font-size: 13px;
          color: #333;
        }
      }
    }
  }
  .btn {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    background: #36b4ea;
    border-radius: 3px;
    width: calc(100% - 40px);
    margin:40px auto;
  }
  .ili {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    .ili-1 {
      font-size: 12px;
      color: #000;
      margin-bottom: 10px;
    }
    .ili-2 {
      background-color: #f0f0f0;
      border-radius: 4px;
      height: 38px;
      position: relative;
      .xxx {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #878b97;
        font-size: 13px;
        z-index: 1001;
        span {
          margin-left: 6px;
          color: #36b4ea;
          font-weight: 600;
        }
      }
    }
  }
  .ali {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 26px;
    .ali1 {
      font-size: 12px;
      color: #878b97;
    }
    .ali2 {
      color: #000;
      font-size: 12px;
    }
  }
  .a {
    transition: all 0.5s !important;
  }
  .g {
    transform: rotateX(-180deg) translateY(50%) !important; 
    transition: all 0.5s !important;
  }
  </style>